.menuPanel {
  position: relative;
  top: 0;
  left: 0;
  background: #272b2e;
  padding: 20px 0!important;
  border-radius: 0;
  box-shadow: none;
  height: calc(~"100vh - 81px");
  border-right: 1px solid #474b4e;
}

.menuPanel li {
  color: #fff;
}

.subMenuPanel {
  position: fixed;
  border-radius: 0;
  left: 200px!important;
  top: 81px!important;
  padding: 0!important;
  overflow: hidden;
  box-sizing: border-box;
  height: calc(~"100vh - 81px");
  z-index: 1100!important;
}

.menuPanel .subMenuPanel {
  position: static;
  width: auto!important;
  padding: 0!important;
  height: auto;
  background: none;
}

.menuPanel .subMenuPanel > div {
  height: 32px!important;
  line-height: 32px!important;
}

.subMenuPanel > ul {
  width: 400px;
  box-sizing: content-box;
  border-radius: 0!important;
  background: #303538!important;
  box-shadow: none;
  margin-right: -40px;
  padding-right: 40px!important;
  overflow-y: scroll;
  height: calc(~"100%");
}

.subMenuPanel > ul li {
  color: #fff;
  overflow: auto!important;
}

.subMenuPanel > ul li:first-child div {
  padding-top: 20px!important;
}

.subMenuPanel > div > i:before {
  width: 9px!important;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85))!important;
  transform: rotate(45deg) translateY(-4px)!important;
}

.subMenuPanel > div > i:after {
  width: 9px!important;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85))!important;
  transform: rotate(-45deg) translateY(4px)!important;
}

.subMenuPanel > div:hover > i:before {
  background-image: linear-gradient(to right, rgba(87, 184, 210, 0.85), rgba(87, 184, 210, 0.85))!important;
}

.subMenuPanel > div:hover > i:after {
  background-image: linear-gradient(to right, rgba(87, 184, 210, 0.85), rgba(87, 184, 210, 0.85))!important;
}

.subPanel > div {
  box-sizing: content-box;
  display: block;
  color: #fff;
  padding: 0 20px 8px 20px!important;
  font-size: 16px!important;
  height: 24px;
  line-height: 24px;
  font-weight: 600;
}

.subPanel > ul {
  box-sizing: content-box;
  border-bottom: 1px solid #595d60;
  padding-bottom: 12px;
  margin-bottom: 12px!important;
}

.subPanel > ul li {
  box-sizing: content-box;
  color: #fff;
  height: 32px!important;
  line-height: 32px!important;
  margin: 0 30px 0 20px!important;
  padding: 0!important;
  overflow: inherit!important;
}

.subPanel > ul li span {
  position: relative!important;
  display: block;
  margin-right: 10px;
}

.subPanel > ul li i {
  position: absolute;
  top: 9px;
  right: -15px;
  margin-right: 0!important;
  color: #fff;
}

//.subPanel > ul li i:hover {
//  color: #f6c136;
//}

.subPanel > ul li ul {
  display: none;
}

.subPanel > ul li span:hover {
  padding: 0 10px;
  margin-right: 0;
  display: block;
  color: #fff!important;
  opacity: 1!important;
  transform: none!important;
  background: hsla(0,0%,100%,.05);
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  bottom: 0;
  right: 20px;
}

.subPanel {
  background: transparent;
}

.subMenuPanel .subPanel {
  position: absolute;
  top: -21px;
  left: 0;
}

.menuPanel > .subMenuPanel {
  width: auto!important;
}

.menuPanel > .subMenuPanel, .subMenuPanel .subMenuPanel {
  border-left: 0!important;
  top: 0!important;
  left: 0!important;
  width: 200px!important;
}

.subMenuPanel .subMenuPanel > div {
  color: #fff!important;
}

.subMenuPanel > ul {
  background: #272b2e;
  border-radius: 0;
  color: #fff;
  box-shadow: none;
  padding: 20px 0;
}

.subMenuPanel > ul > li {
  color: #fff!important;
  position: static!important;
}

//.subMenuPanel > ul > li:hover {
//  background: transparent!important;
//  color: #00c1de!important;
//}

.subMenuPanel .subMenuPanel .subMenuPanel {
  left: 199px!important;
  top: 0!important;
  width: 200px;
  background: #272b2e;
  border-left: 1px solid #474b4d!important;
}

:global {
  .zoom-big-enter.zoom-big-enter-active,
  .zoom-big-appear.zoom-big-appear-active {
    -webkit-animation-name: antMoveLeftIn!important;
    animation-name: antMoveLeftIn!important;
  }
  .zoom-big-enter,
  .zoom-big-appear {
    -webkit-animation-duration: 0.3s!important;
    animation-duration: 0.3s!important;
    //-webkit-animation-timing-function: linear!important;
    //animation-timing-function: linear!important;
  }
  .zoom-big-leave.zoom-big-leave-active {
    -webkit-animation-duration: 0s!important;
    animation-duration: 0s!important;
    //-webkit-animation-name: antMoveLeftOut!important;
    //animation-name: antMoveLeftOut!important;
    //-webkit-animation-timing-function: linear!important;
    //animation-timing-function: linear!important;
  }
//  //.ant-dropdown-menu-item {
//  //  -webkit-transition: all 0s!important;
//  //  transition: all 0s!important;
//  //}
//  //@keyframes antMoveLeftIn {
//  //  0% {
//  //    -webkit-transform-origin: 0 0;
//  //    transform-origin: 0 0;
//  //    -webkit-transform: translateX(-200px)!important;
//  //    transform: translateX(-200px)!important;
//  //    opacity: 0;
//  //  }
//  //  100% {
//  //    -webkit-transform-origin: 0 0;
//  //    transform-origin: 0 0;
//  //    -webkit-transform: translateX(0)!important;
//  //    transform: translateX(0)!important;
//  //    opacity: 1;
//  //  }
//  //}
//  //
//  //@-webkit-keyframes antMoveLeftIn {
//  //  0% {
//  //    -webkit-transform-origin: 0 0;
//  //    transform-origin: 0 0;
//  //    -webkit-transform: translateX(-200px)!important;
//  //    transform: translateX(-200px)!important;
//  //    opacity: 0;
//  //  }
//  //  100% {
//  //    -webkit-transform-origin: 0 0;
//  //    transform-origin: 0 0;
//  //    -webkit-transform: translateX(0)!important;
//  //    transform: translateX(0)!important;
//  //    opacity: 1;
//  //  }
//  //}
//  //@-webkit-keyframes antMoveLeftOut {
//  //  0% {
//  //    -webkit-transform-origin: 0 0;
//  //    transform-origin: 0 0;
//  //    -webkit-transform: translateX(0%);
//  //    transform: translateX(0%);
//  //    opacity: 1;
//  //  }
//  //  100% {
//  //    -webkit-transform-origin: 0 0;
//  //    transform-origin: 0 0;
//  //    -webkit-transform: translateX(0)!important;
//  //    transform: translateX(0)!important;
//  //    opacity: 0;
//  //  }
//  //}
//  //@keyframes antMoveLeftOut {
//  //  0% {
//  //    -webkit-transform-origin: 0 0;
//  //    transform-origin: 0 0;
//  //    -webkit-transform: translateX(0%);
//  //    transform: translateX(0%);
//  //    opacity: 1;
//  //  }
//  //  100% {
//  //    -webkit-transform-origin: 0 0;
//  //    transform-origin: 0 0;
//  //    -webkit-transform: translateX(0%)!important;
//  //    transform: translateX(0%)!important;
//  //    opacity: 0;
//  //  }
//  //}
}
